<template>
	<div class="thisBot" :class="{active:active}" id="thisBot" data-bottom="0" style="bottom: 0px;">
		<div class="cycle-btn bot-tab-btn" :class="[tabPosition]" @click="showFileBox">
			<div class="cycle-warp">
				<p class="cycle-text bot-tab-text">显示筛选</p>

				<span src="skin/images/cycle_out.png" class="out"></span>
				<span src="skin/images/cycle_middle.png" class="middle"></span>
				<span src="skin/images/cycle_inner.png" class="inner"></span>
			</div>
		</div>
		<div class="thisBot-pic selected" @click="showFileBox" id="thisBot-pic"></div>

		<div class="thisBot-line" v-for="(item,index) in filterData" :key="index">
			<span class="thisBot-label">{{item.name}}：</span>
			<span class="thisBot-check" :class="{eventTypeSelect:checkeddata.indexOf(sonItem.type)>=0,selected:checkeddata.indexOf(sonItem.type)>=0}" :data-type="sonItem.type" :key="sonItem.type" v-for="sonItem in  item.sonList" @click="changeCheck(sonItem.type)">{{sonItem.name}}</span>

		</div>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				active: false,
			}
		},
		props: {
			tabPosition: {
				type: String,
				default: 'left'
			},
			filterData: {
				type: Array,
				default () {
					return []
				}
			},
			checkeddata: {
				type: Array,
				default () {
					return []
				}
			},
		},
		methods: {
			showFileBox() {
				this.active = !this.active;
			},
			changeCheck(type) {
				
				let checkedData = JSON.parse(JSON.stringify(this.checkeddata));
				if (checkedData.indexOf(type) >= 0) {
					let index = checkedData.indexOf(type);
					checkedData.splice(index, 1)
				} else {
					checkedData.push(type);
				}
				this.$emit('update:checkeddata', checkedData)
			}
		}
	}
</script>

<style lang="less">
	.thisBot {
		position: fixed;
		bottom: -110px;
		left: 0;
		z-index: 1000;
		padding: 6px 0;
		width: 100%;
		height: auto;
		background-color: rgba(15, 26, 38, 0.9);
	}

	.bot-tab-btn {
		position: absolute;
		top: -55px;
		z-index: 1100;
	}

	.bot-tab-btn.left {
		left: 0;
	}

	.bot-tab-btn.center {
		left: 50%;
		margin-left: -55px;
	}

	.bot-tab-btn.right {
		right: 0;
	}

	.thisBot {
		-webkit-transform: translateY(100%);
		transform: translateY(100%);
		-webkit-transition: 0.5s ease-in;
		transition: 0.5s ease-in;
	}

	.thisBot.active {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}

	/* 圆环按钮start */

	.cycle-btn {
		width: 111px;
		height: 55px;
		overflow: hidden;
	}

	.cycle-warp {
		width: 111px;
		height: 111px;
		position: relative;
	}

	.cycle-btn span {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
	}

	.cycle-text {
		font-size: 14px;
		color: #fff;
		text-shadow: 0px 2px 1px rgba(0, 0, 0, 0.4);
		opacity: 0.7;
		position: absolute;
		left: 0;
		top: 32px;
		width: 100%;
		text-align: center;
		z-index: 4;
		margin: 0;
	}

	.cycle-btn .out {
		display: block;
		z-index: 1;
		width: 111px;
		height: 111px;
		animation: cycleOut 2s infinite ease-out;
		background: url(./images/cycle_out.png) no-repeat center;
	}

	.cycle-btn .middle {
		display: block;
		z-index: 2;
		width: 95px;
		height: 95px;
		animation: cycleMiddle 1.5s infinite ease-in;
		background: url(./images/cycle_middle.png) no-repeat center;
	}

	.cycle-btn .inner {
		display: block;
		z-index: 3;
		width: 84px;
		height: 84px;
		animation: cycleInner 3s infinite ease-out alternate;
		background: url(./images/cycle_inner.png) no-repeat center;
	}

	@keyframes cycleOut {
		0% {
			transform: scale(0);
			opacity: 0;
		}

		80% {
			transform: scale(0.9);
			opacity: 1;
		}

		100% {
			transform: scale(1);
			opacity: 0;
		}
	}

	@keyframes cycleMiddle {
		0% {
			transform: scale(0);
			opacity: 0;
		}

		40% {
			transform: scale(0.7);
			opacity: 1;
		}

		100% {
			transform: scale(1.2);
			opacity: 0;
		}
	}

	@keyframes cycleInner {
		0% {
			transform: scale(0.8);
			opacity: 0.8;
		}

		100% {
			transform: scale(1);
			opacity: 1;
		}
	}

	.thisBot-pic {
		position: absolute;
		right: 10px;
		top: 14px;
		width: 20px;
		height: 20px;
		background: url("./images/up.png") no-repeat center;
		cursor: pointer;
	}

	.thisBot-pic.selected {
		background-image: url("./images/down.png");
	}

	.thisBot-line {
		padding: 6px 40px 6px 18px;
		min-height: 24px;
	}

	.thisBot-line:after {
		content: "";
		clear: both;
		display: table;
	}

	.thisBot-label {
		display: inline;
		width: 70px;
		float: left;
		margin-right: 8px;
		height: 24px;
		line-height: 24px;
		font-size: 14px;
		opacity: 0.8;
		color: #fff;
		white-space: nowrap;
	}

	.thisBot-check {
		display: inline;
		float: left;
		padding: 0 10px 0 26px;
		margin-right: 2px;
		height: 24px;
		line-height: 24px;
		font-size: 14px;
		color: #fff;
		background: url("./images/check.png") no-repeat 3px center;
		cursor: pointer;
	}

	.thisBot-check.selected .color-block {
		display: inline-block;
	}

	.thisBot-check.selected[data-shape=custom] .color-block {
		display: none;
	}

	.thisBot-check:hover {
		color: #01a0fe;
	}

	.thisBot-check.selected {
		background-image: url("./images/check2.png");
	}
</style>
